<template>
  <div class="list-warp"
       v-infinite-scroll="loadMore2"
       infinite-scroll-disabled="completedLoading"
       infinite-scroll-immediate-check="false"
       infinite-scroll-distance="50">
    <div class="order-box" v-for="(item, index) in completed">
      <div class="c-left">
        <!-- 球 -->
        <div class="c-left-p1" :class="item.deviceTypeName === '洗衣机' ? 'bg-xy' : 'bg-hg'">
          <i class="icon iconfont">{{item.deviceTypeName === '洗衣机'? '&#xe608;' : '&#xe60d;'}}</i>
        </div>
        <!-- 线 -->
        <div class="line">
        </div>
      </div>
      <div class="c-right">
        <order :item="item"></order>
      </div>
    </div>
    <div class="weui-loadmore" v-show="loading">
      <i class="weui-loading"></i>
      <span class="weui-loadmore__tips">正在加载</span>
    </div>
    <div class="weui-loadmore weui-loadmore_line" v-show="noData">
      <span class="weui-loadmore__tips">暂无数据</span>
    </div>
    <noData v-if="completed.length == 0">
      <p>暂无进行中的订单</p>
    </noData>
  </div>
</template>
<script>
  import * as api from 'api';
  import noData from '@/components/noData';
  export default {
    props: {
      userId: {
        type: String,
        require: true
      }
    },

    data () {
      return {
        completedLoading: true,
        page: 0,
        loading: false,
        noData: false,
        completed: []
      }
    },

    created () {
      this.queryOrder();
    },

    components: {
      order: require('./order'),
      noData
    },

    methods: {
      // 请求数据
      queryOrder (lodaMore) {
        api.queryUserOrderList({
          userId: this.userId,
          status: 3
        })
          .then(res => {
            if (lodaMore) {
              if (this.completed.length >= res.total) {
                this.completedLoading = true;
                this.loading = false;
                this.noData = true;
              } else {
                this.completed = this.completed.concat(res.resultData);
                this.completedLoading = false;
                this.loading = false;
              }
            } else {
              this.completed = res.resultData;
              this.completedLoading = false;
            }
          })
      },

      // 加载更多逻辑处理
      loadMore2 () {
        this.completedLoading = true;
        this.loading = true;
        this.queryOrder(true);
      }
    }
  }
</script>
